<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="/kissy/src/css/assets/dpl/base.css" rel="stylesheet"/>
    <style>
        body {
            background-color: #333;
            overflow: hidden;
        }

        .t {
            border: 1px solid transparent;
            position: absolute;
            top: 200px;
            left: 200px;
            /*
            ie
            margin: 100px;
            */
        }

        #t2 {
            top: 200px;
            left: 500px;
        }

        .t {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<h1 style="color:white;text-align: center">360</h1>

<button id="run">run</button>
<div id="t" class="t">
</div>

<div id="t2" class="t">
</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use('dom,anim,node', function (S, Dom, Anim, Node) {
        var t = Dom.get('#t');
        var t2 = Dom.get('#t2');
        Dom.css(t, 'transform-origin', '0px 0px');
        var run = false;
        Node.all('#run').on('click', function () {
            if (run) {
                return;
            }
            run = true;
            new Anim(t, {
                transform: 'rotate(360deg)'
            }, {
                duration: 1,
                complete: function () {
                    Dom.css(t, 'transform', '');
                    run = false;
                }
            }).run();

            var a2 = new Anim(t2, {
                transform: 'rotate(360deg)'
            }, {
                duration: 1,
                complete: function () {
                    Dom.css(t2, 'transform', '');
                    S.log('done2');
                }
            });
            a2.run();
        });

    });
</script>
</body>
</html>